<template>
	<view class="box">
		<view class="bang-club">
			<view class="bang-club-top">
				<view class="bang-top">
					<view class="ming-xis" @click="goLevel">
						等级规则
					</view>
				</view>

				<view class="flex">
					<view class=" top-item">
						<view class="top-title">
							当前等级
						</view>
						<view class="top-content top-left flex">
							{{vipData.memberLevelTitle}}
						</view>
					</view>
					<view class="top-right top-item">
						<view class="top-title">
							帮帮豆余额
						</view>
						<view class="top-content flex">
							{{vipData.integral - vipData.accumulatedUsageIntegral}}
						</view>
					</view>
				</view>

			</view>
			<view class="tit">
				<view :class="titXuan == 1 ? 'xuan tit_item' : 'tit_item'" @click="titClick(1)">
					今日任务
					<image class="image" v-if="titXuan == 1"
						src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"></image>
				</view>
				<view :class="titXuan == 3 ? 'xuan tit_item' : 'tit_item'" style="margin-left: 60rpx;"
					@click="titClick(3)">
					活动中心
					<image class="image" v-if="titXuan == 3"
						src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"></image>
				</view>
				<view :class="titXuan == 2 ? 'xuan tit_item' : ' tit_item'" style="margin-left: 60rpx;"
					@click="titClick(2)">
					车会员
					<image class="image" v-if="titXuan == 2"
						src="https://pic.bangbangtongcheng.com/static/xuanzhong.png" mode="widthFix"></image>
				</view>
			</view>
			<view v-if="titXuan == 1" style="background-color: #f5f5f5;">
				<view class="task-content flex" style="background-color: #fff;">
					<view class="task-title">
						<!-- <view class="today-task">
							今日任务
						</view> -->
						<view class="today-task-desc">
							完成以下任务，可获得{{totalIntegral}}帮帮豆
						</view>
					</view>
					<view class="level-rule" @click="goDetail">
						明细
					</view>
				</view>

				<view class="task-list" style="background-color: #fff;">
					<view class="task-li flex" v-for="(item, index) in taskList" :key="index">
						<view class="task-left flex">
							<image src="https://pic.bangbangtongcheng.com/static/gzh01.png" mode=""></image>
							<view class="task-desc">
								<view class="task-title">{{item.title}}</view>
								<view class="task-dot">+{{item.integral}}帮帮豆</view>
							</view>
						</view>
						<view class="task-right flex">
							<view class="task-btn finish" v-if="item.CS == item.num"> {{taskName[index].finish}} </view>
							<view class="task-btn" v-else @click="goFinish(item.number)">{{taskName[index].noFinish}}
							</view>
							<view class="task-num">{{item.CS}}/{{item.num}}次</view>
						</view>
					</view>
				</view>
				<view class="more-task" style="background-color: #fff;">
					— 更多任务，敬请期待 —
				</view>
			</view>

			<view v-if="titXuan == 2" style="background-color: #f5f5f5;position: relative;">
				<!-- <image src="https://pic.bangbangtongcheng.com/static/member/joinMember.png" mode="aspectFill" style="
				position: absolute;left: 0rpx;right:0rpx;padding: 20rpx 50rpx;height: 168rpx;top:0" @click.stop="joinMember"></image> -->

				<template
					v-if="userInfo.businessType==2&&userInfo.isShop==1&&(userInfo.shopType=='3'||userInfo.shopType=='4')">
					<view @click="joinMember" style="position: absolute;left: 0rpx;right:0rpx;height: 192rpx;top:0;padding: 20rpx 50rpx 20rpx 32rpx">
						<image src="https://pic.bangbangtongcheng.com/static/member/joinMember.png" mode="aspectFill" style="
						width: 100%;height: 100%;" >
						</image>
					</view>
					

					<view class="member" style="height: auto;overflow: hidden;padding-top: 200rpx;line-height: 60rpx;">

						<view :class="members == 1 ? 'xuan member_item' : 'member_item'" @click="membersClick(1)">待领会员礼
						</view>
						<view :class="members == 2 ? 'xuan member_item' : 'member_item'" style="margin-left: 60rpx;"
							@click="membersClick(2)">领取记录</view>
						<view :class="members == 3 ? 'xuan member_item' : 'member_item'" style="margin-left: 60rpx;"
							@click="membersClick(3)">车辆管理</view>
					</view>
				</template>
				<template v-else>
					<view class="member">
						<view :class="members == 1 ? 'xuan member_item' : 'member_item'" @click="membersClick(1)">待领会员礼
						</view>
						<view :class="members == 2 ? 'xuan member_item' : 'member_item'" style="margin-left: 60rpx;"
							@click="membersClick(2)">领取记录</view>
						<view :class="members == 3 ? 'xuan member_item' : 'member_item'" style="margin-left: 60rpx;"
							@click="membersClick(3)">车辆管理</view>
					</view>
				</template>
				<!--  待领会员礼列表  -->
				<view class="membershipList" v-if="members == 1">
					<view class="membershipList_item" v-for="(item,index) in membersCollectList" :key="index">
						<view class="membership_left">
							<view class="image_k">
								<image class="image" src="https://pic.bangbangtongcheng.com/static/bbcz/gift.png"
									mode=""></image>
							</view>
							<view class="">
								{{item.monthContent}}
							</view>
						</view>
						<view class="">
							<view class="membership_state" style="backgroundColor:#C7C7C7"
								v-if="item.proportionReceiving.split('/')[0]!='0' && item.proportionReceiving.split('/')[1]!='0' && item.proportionReceiving.split('/')[0]>=item.proportionReceiving.split('/')[1]">
								已领取
							</view>
							<view class="membership_state" v-else @click="membershipGiftDetails(item)"
								:style="{backgroundColor: item.receiveContent=='去领取'?'#64B6A8':'#C7C7C7'}">
								<image src="https://pic.bangbangtongcheng.com/static/member/goMerchant.png" mode="widthFix"
									style="vertical-align: middle;width: 40rpx;"></image> {{item.receiveContent}}
							</view>
							<view class=""
								v-if="item.receiveContent=='去领取'&& item.proportionReceiving.split('/')[1]!='0'"
								style="text-align: center;font-size: 26rpx;font-weight: 400;color: #A3AAB0;">
								{{item.proportionReceiving}}
							</view>
						</view>
					</view>
					<!-- 暂无更多数据 -->
					<view class="more">
						— 更多好礼，敬请期待 —
					</view>
				</view>
				<!-- 领取记录列表  -->
				<view class="membershipList" v-else-if="members == 2">
					<view v-if="receivRecordList.length && licensePlateList.length">
						<view class="membershipList_item" v-for="(item,index) in receivRecordList" :key="index"
							@click="viewDetails(item)">
							<view class="membership_left">{{item.monthContent}}</view>
							<view class="">查看明细 ></view>
						</view>
					</view>
					<!-- 暂无数据 -->
					<view class="NoData">
						<image class="image" v-if="!receivRecordList.length || !licensePlateList.length"
							src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
						<view v-if="!receivRecordList.length" style="margin-top: 24rpx;">您还没有领取过礼品呢</view>
						<view v-if="!licensePlateList.length"><span @click="toTranslate"
								style="color:#64B6A8;">前往门店</span>领取会员码，成为会员每月领取好礼</view>
						<view v-if="!licensePlateList.length" class="Unbind" @click="toTranslate">
							去绑定
						</view>
					</view>
				</view>
				<view class="membershipList" v-else-if="members == 3">
					<view v-if="licensePlateList.length">
						<view class="membershipList_item" v-for="(item,index) in licensePlateList" :key="item.id">
							<view class="LicensePlate">
								<!-- 车牌号 -->
								<view class="LicensePlate_name">
									{{item.licensePlateNumber}}
								</view>
								<!-- 绑定时间 -->
								<view class="LicensePlate_time">
									绑定时间:{{item.bindingTime}}
								</view>
							</view>
							<view class="Unbinds" @click="jcbdClick(item)">解除绑定</view>
						</view>
					</view>
					<!-- 暂无数据 -->
					<view class="NoData" v-else>
						<image class="image" src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
						<view style="margin-top: 24rpx;">您还没有绑定的车车呢</view>
						<view><span @click="toTranslate" style="color: #64B6A8;">前往门店</span>领取会员码，成为会员每月领取好礼</view>
						<view class="Unbind" @click="toTranslate">
							去绑定
						</view>
					</view>
				</view>
			</view>

			<view class="activityCenter" v-if="titXuan == 3" style="background-color: #f5f5f5;">
				<view class="jiLu" @click.stop="redemptionRecord">
					兑换记录>
				</view>
				<view class="iteam" v-for="(item,index) in aboutList" :key="item.id" @click="eventDetails(item)">
					<image class="image" :src="item.activityPicture" mode="aspectFill"></image>
					<view class="iteam_title">
						<view class="label">
							{{item.activityStatus}}
						</view>
						<view class="title">
							{{item.activityTitle}}
						</view>
					</view>
					<view class="iteam_time">
						<view class="left_time">
							<view class="startTime">
								开始时间：{{item.startTime}}
							</view>
							<view class="endTime">
								结束时间：{{item.endTime}}
							</view>
						</view>
						<view class="right_ckxq">
							查看详情>
						</view>
					</view>
				</view>
				<!-- 暂无更多数据 -->
				<view class="more">
					— 更多活动，敬请期待 —
				</view>
			</view>


			<view class="fabuZbc" v-if="fabuZbc" @touchmove.stop.prevent="">
				<view class="fabuZbc_sj">
					<template v-if="userInfo.businessType==1">
						<view class="fzView" v-if="userInfo.shopType!=2">
							<image src="https://pic.bangbangtongcheng.com/static/fabu_c.png" @click="fabuClick(1)" />
							<p>卖房</p>
						</view>
						<view class="fzView" v-if="userInfo.shopType!=2 ">
							<image src="https://pic.bangbangtongcheng.com/static/fabu_z.png" @click="fabuClick(2)" />
							<p>租房</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop == '1'">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png"
								@click="fabuClick(11)" />
							<p>招全职</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop == '1'">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png"
								@click="fabuClick(12)" />
							<p>招兼职</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '1'">
							<image src="/static/2house-info.png" @click="fabuClick(3)" />
							<p>公司资料</p>
						</view>
						<!-- <view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '1'">
			  			<image src="/static/2dynamic-mes.png" @click="fabuClick(4)" />
			  			<p>门店资讯</p>
			  		</view> -->
						<view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '2'">
							<image src="/static/2house-info.png" @click="fabuClick(5)" />
							<p>楼盘轮播</p>
						</view>
						<!-- <view class="fzView" v-if="userInfo.isShop == '1' && userInfo.shopType == '2'">
			  			<image src="/static/2dynamic-mes.png" @click="fabuClick(6)" />
			  			<p>楼盘资讯</p>
			  		</view> -->
					</template>
					<template v-else-if="userInfo.businessType==2">
						<view class="fzView" v-if="userInfo.shopType==1 || userInfo.shopType==2">
							<image src="/static/mc01.png" @click="fabuClick(9)" />
							<p>卖车</p>
						</view>
						<view class="fzView" v-if="userInfo.shopType==3 || userInfo.shopType==4">
							<image src="/static/fwxm01.png" @click="fabuClick(8)" />
							<p>服务项目</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop==1&& userInfo.shopType!=3 && userInfo.shopType!=4">
							<image src="/static/zscx01.png" @click="fabuClick(10)" />
							<p>在售车系</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop == '1'">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png"
								@click="fabuClick(11)" />
							<p>招全职</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop == '1'">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png"
								@click="fabuClick(12)" />
							<p>招兼职</p>
						</view>
						<view class="fzView" v-if="userInfo.isShop == 1">
							<image src="/static/2house-info.png" @click="fabuClick(3)" />
							<p>公司资料</p>
						</view>
					</template>
					<template v-else>
						<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
							<image src="https://pic.bangbangtongcheng.com/static/fabu_c.png" @click="fabuClick(1)" />
							<p>卖房</p>
						</view>
						<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
							<image src="https://pic.bangbangtongcheng.com/static/fabu_z.png" @click="fabuClick(2)" />
							<p>租房</p>
						</view>
						<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
							<image src="/static/mc01.png" @click="fabuClick(9)" />
							<p>卖车</p>
						</view>
						<view class="fzView">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/releaseFullTime.png"
								@click="fabuClick(11)" />
							<p>招全职</p>
						</view>
						<view class="fzView">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/postPartTime.png"
								@click="fabuClick(12)" />
							<p>招兼职</p>
						</view>
						<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus != 1">
							<image src="https://pic.bangbangtongcheng.com/static/bbzc/writeResume.png"
								@click="fabuClick(13)" />
							<p>写简历</p>
						</view>
						<view class="fzView" v-if="userInfo.enterpriseRecruitmentStatus == 1">
							<image src="/static/2house-info.png" @click="fabuClick(3)" />
							<p>公司资料</p>
						</view>
					</template>
					<view class="show" @click="fabu_guan">
						<image style="width: 100%; height: 100%"
							src="https://pic.bangbangtongcheng.com/static/guanbi.png">
						</image>
					</view>
				</view>
			</view>
			<!-- 解除绑定弹窗 -->
			<uni-popup ref="binds" mode="center">
				<view class="binds_frame">
					<view class="binds_frame_t">解除绑定</view>
					<view class="binds_frame_c">确定要解绑车牌号{{cpData.licensePlateNumber}}？</view>
					<view class="binds_frame_b">
						<view class="cancel" @click="jcbdCancel">取消</view>
						<view class="determine" @click="Unbind">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		data() {
			return {
				finished: 0,
				vipData: {},
				taskList: [],
				taskName: [{
						noFinish: "去关注",
						finish: "已关注",
					},
					{
						noFinish: "去完善",
						finish: "已完善",
					},
					{
						noFinish: "去完成",
						finish: "已完成",
					},
					{
						noFinish: "去发布",
						finish: "已发布",
					},
					{
						noFinish: "去完成",
						finish: "已完成",
					},
					{
						noFinish: "去完成",
						finish: "已完成",
					},
					{
						noFinish: "去发布",
						finish: "去发布",
					},
				],
				fabuZbc: false,
				userInfo: uni.getStorageSync("Pduser"),
				totalIntegral: 155,
				wxUrl: "",
				titXuan: 1,
				members: 1,
				// 测试判断
				see: 1,
				receivRecordList: [],
				licensePlateList: [],
				cpData: "",
				membersCollectList: [],
				// 活动列表
				aboutList: []
			}
		},
		onLoad(option) {
			if (option.index) {
				this.titClick(2)
			}
			this.getVip()
			this.getUserPhone()
			console.log(uni.getStorageSync("Pduser"))
			this.$myRequest
				.get("/mob/user/getConstant").then(res => {
					this.wxUrl = res.r.gz_url;
					console.log(this.wxUrl)
				})
		},
		onShow() {
			this.getVip()
			this.getUserPhone()
		},
		methods: {
			// 加入 商家
			joinMember() {
				uni.navigateTo({
					url:'/pages_my/v2GiftDetails'
				})
				
				// uni.showToast({
				// 	title:'申请已提交，请您耐心等待平台回访',
				// 	icon:'none'
				// })
			},
			redemptionRecord() {
				uni.navigateTo({
					url: "/pages_recruitMoney/my/redemptionRecord"
				})
			},
			// 获取活动列表
			moveAboutList() {
				this.$myRequest.get("/api/mobile/public/getActivityCenterTabulation").then(res => {
					this.aboutList = res.activityCenterTabulation.pageList
					uni.hideLoading();
				})
			},
			toTranslate() {
				uni.navigateTo({
					url: "/pages_owner/carMember/merchantList"
				})
			},
			viewDetails(item) {
				let date = ""
				date = item.yearContent + "-" + item.monthContent.split("月")[0]
				uni.navigateTo({
					url: "/pages_owner/carMember/claimDetails?years=" + date
				})
			},
			membershipGiftDetails(item) {
				if (item.receiveContent != '去领取') {
					return
				}
				uni.navigateTo({
					url: "/pages_owner/carMember/membershipCeremony"
				})
			},
			eventDetails(item) {
				uni.navigateTo({
					url: "/pages_my/eventDetails?id=" + item.id + '&index=' + item.activityStatus
				})
			},
			jcbdClick(item) {
				this.$refs.binds.open()
				this.cpData = item
			},
			jcbdCancel() {
				this.$refs.binds.close()
			},
			titClick(index) {
				this.titXuan = index
				
				if (index == 2) {
					this.membersClick(1)
					this.licensePlate()
				} else if (index == 3) {
					this.moveAboutList()
				}
			},
			membersClick(index) {
				this.members = index
				uni.showLoading({
					title: '加载中',
					mask: false
				})
				if (index == 1) {
					this.membersCollect()
				} else if (index == 2) {
					this.receivRecords()
				} else {
					this.licensePlate()
				} 
			},
			// 获取待领取会员礼列表
			membersCollect() {
				this.$myRequest.get("/api/mobile/vehicleOwner/getMemberGiftReceived", {
					userId: this.userInfo.id
				}).then(res => {
					this.membersCollectList = res.giftInformationList.pageList
					uni.hideLoading();
				})
			},
			// 获取车会员领取记录
			receivRecords() {
				this.$myRequest.get("/api/mobile/vehicleOwner/getReceiveRecord", {
					userId: this.userInfo.id
				}).then(res => {
					let data = new Date()
					let year = data.getFullYear()
					if (res.giftReceiveRecordList.reminder[year]) {
						this.receivRecordList = this.noRepeat1(res.giftReceiveRecordList.reminder[year])
					} else {
						this.receivRecordList = []
					}
					uni.hideLoading();
				})
			},
			noRepeat1(arr) {
				for (var i = 0; i < arr.length; i++) {
					for (var j = i + 1; j < arr.length; j++) {
						if (arr[i].monthContent == arr[j].monthContent) {
							arr.splice(j, 1);
							j--;
						}
					}
				}
				return arr;
			},
			// 车牌号列表
			licensePlate() {
				this.$myRequest.get("/api/mobile/vehicleOwner/getLicensePlateNumberListByUserId", {
					userId: this.userInfo.id,
					deleteFlag: 0
				}).then(res => {
					this.licensePlateList = res.LicensePlateNumberList.pageList
					uni.hideLoading();
				});
			},
			// 解除绑定
			Unbind() {
				let that = this
				this.$myRequest.post("/api/mobile/vehicleOwner/relieveBind", {
					id: this.cpData.id,
					userId: this.userInfo.id
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: "none",
						mask: true,
					});
					this.licensePlate()
					that.jcbdCancel()
				});
			},
			// 获取会员数据
			getVip() {
				this.$myRequest
					.post("/mob/iteration/getClubInfo", {
						userId: this.userInfo.id
					}).then(res => {
						console.log(111111111111, res)
						// this.vipData = res.userInfo;
						this.taskList = res.taskList;
						this.totalIntegral = 0
						this.taskList.forEach(el => {
							this.totalIntegral += (el.num - el.CS) * el.integral;
						})
					})
			},

			getUserPhone() {

				this.$myRequest
					.get("/mob/login/getUserInfoByPhone", {
						phone: this.userInfo.phone
					})
					.then(res => {
						this.vipData = res.userInfo;
					});
			},

			// 去我的等级页面
			goLevel() {
				uni.navigateTo({
					url: "/pages_my/myLevel"
				})
			},

			fabuClick(num) {
				if (!this.userInfo.phone) {
					uni.showToast({
						title: "请登录",
						icon: "none",
						mask: true,
					});
					return;
				}

				if (num == 1) {
					uni.navigateTo({
						url: "/pages_houses/housing/salesType",
					});
					// uni.navigateTo({
					// 	url: "/pages_release/index",
					// });
				} else if (num == 2) {
					// uni.navigateTo({
					// 	url: "/pages_release/tenement",
					// });
					uni.navigateTo({
						url: "/pages_houses/housing/salesType?fromType="+'tenement',
					});
				} else if (num == 3) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=1",
					});
				} else if (num == 4) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=2",
					});
				} else if (num == 5) {
					if (!this.userInfo.buildingsId) {
						uni.showToast({
							title: '该商家还未发布楼盘！',
							icon: "none",
							mask: true
						});
						return
					}
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=3",
					});
				} else if (num == 6) {
					uni.navigateTo({
						url: "/pages_release/sellingInfomation?identify=4",
					});
				} else if (num == 7) {
					uni.navigateTo({
						url: "/pages_owner/release/releaseFriends",
					});
				} else if (num == 8) {
					uni.navigateTo({
						url: "/pages_owner/release/servicesAvailable",
					});
				} else if (num == 9) {
					uni.navigateTo({
						url: "/pages_owner/release/sellCar",
					});
				} else if (num == 10) {
					uni.navigateTo({
						url: "/pages_owner/release/saleCarSeries",
					});
				} else if (num == 11) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/publishFullTime",
					});
				} else if (num == 12) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/publishConcurrently",
					});
				} else if (num == 13) {
					uni.navigateTo({
						url: "/pages_recruitMoney/publish/writeResume",
					});
				}
				this.fabuZbc = false;
			},
			fabu_guan() {
				this.fabuZbc = false;
			},

			// 去等级详情页面
			goDetail() {
				uni.navigateTo({
					url: "/pages_my/detail"
				})
			},

			// 去完成
			goFinish(val) {
				if (val == 1) {

					// #ifdef H5
					console.log(val)
					window.location.href = this.wxUrl;
					// #endif

					// #ifdef MP-WEIXIN
					let wxUrl = "https://www.bangbangtongcheng.com/conven/login/Wxlogin.do?userId=" + this.userInfo.id;
					console.log(wxUrl)
					uni.navigateTo({
						url: "/pages_my/webview?wxUrl=" + encodeURIComponent(wxUrl)
					})
					// #endif

					// #ifdef APP-PLUS
					let wxUrl = "https://www.bangbangtongcheng.com/conven/login/Wxlogin.do?userId=" + this.userInfo.id;
					plus.share.getServices(function(res) {
						var sweixin = null;
						for (var i = 0; i < res.length; i++) {
							var t = res[i];
							if (t.id == 'weixin') {
								sweixin = t;
							}
						}
						if (sweixin) {
							sweixin.launchMiniProgram({
								id: 'gh_c8b17811efca', //这里写你的小程序原始id（以gh开头）
								type: 0, //这里是不同的环境（默认0）
								path: `/pages_my/webview?wxUrl=${encodeURIComponent(wxUrl)}` //这里是指定页的路径，如需传参直接字符串拼接（首页可以省略）
							});
						}
					}, function(res) {
						console.log(JSON.stringify(res));
					});
					// #endif

				} else if (val == 2) {
					uni.navigateTo({
						url: "./changeInfo"
					})
				} else if (val == 3) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else if (val == 4) {
					console.log(val)
					this.fabuZbc = true;
				} else if (val == 5) {
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else if (val == 6) {
					uni.switchTab({
						url: "/pages/index/friendsCircle"
					})
				} else if (val == 7) {
					uni.navigateTo({
						url: "/pages_owner/release/releaseFriends"
					})
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	page {
		background-color: #FFFFFF;
	}

	.box {
		background-color: #fff;
		min-height: 100vh;
	}

	/deep/ .uni-popup {
		z-index: 1;
	}

	.binds_frame {
		width: 600rpx;
		height: 286rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		text-align: center;
		position: relative;

		.binds_frame_t {
			font-size: 30rpx;
			font-weight: 550;
			color: #000000;
			padding-top: 36rpx;
		}

		.binds_frame_c {
			font-size: 30rpx;
			font-weight: 400;
			color: #999999;
			margin-top: 34rpx;
		}

		.binds_frame_b {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 90rpx;
			display: flex;

			.cancel {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F2F2F2;
				border-radius: 0px 0px 0px 10rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
			}

			.determine {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #64B6A8;
				border-radius: 0px 0px 10rpx 0px;
				font-size: 30rpx;
				font-weight: 400;
				color: #fff;
			}
		}
	}

	.member {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;
		height: 120rpx;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #999999;

		.xuan {
			font-size: 26rpx;
			font-weight: 400;
			color: #64B6A8;
		}
	}

	.membershipList {
		background-color: #fff;
		padding-left: 50rpx;
		padding-right: 40rpx;

		.membershipList_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 150rpx;
			border-bottom: 1px solid #d6d6d6;

			.membership_left {
				display: flex;
				align-items: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;

				.image_k {
					width: 66rpx;
					height: 66rpx;
					border-radius: 10rpx;
					border: 1px solid #C4D8D4;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 28rpx;

					.image {
						width: 26rpx;
						height: 26rpx;
					}
				}
			}

			.membership_state {
				width: 150rpx;
				height: 60rpx;
				border-radius: 30rpx;
				font-size: 26rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 60rpx;
			}
		}

		.LicensePlate {
			display: flex;
			flex-direction: column;

			.LicensePlate_name {
				font-size: 32rpx;
				font-weight: 400;
				color: #333333;
			}

			.LicensePlate_time {
				font-size: 26rpx;
				font-weight: 400;
				color: #A3AAB0;
				margin-top: 4rpx;
			}
		}

		.Unbinds {
			width: 150rpx;
			height: 60rpx;
			background-color: #64B6A8;
			border-radius: 30rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.more {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #8FBAB2;
			margin: 20rpx 0;
		}

		.NoData {
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #999999;

			.image {
				width: 350rpx;
				height: 350rpx;
			}

			.Unbind {
				width: 190rpx;
				height: 74rpx;
				margin: 0 auto;
				margin-top: 64rpx;
				border-radius: 10rpx;
				border: 1px solid #64B6A8;
				font-size: 34rpx;
				font-weight: 400;
				color: #64B6A8;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.tit {
		width: 750rpx;
		height: 100rpx;
		background-color: #f4f4f4;
		display: flex;
		align-items: center;
		font-size: 30rpx;
		font-weight: 500;
		color: #7C7C7C;
		padding-left: 30rpx;

		.tit_item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.image {
				width: 60rpx;
				height: 30rpx;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: -20rpx;
			}
		}

		.xuan {
			font-size: 34rpx;
			font-weight: 500;
			color: #64B6A8;
		}
	}

	.bang-club {
		background-color: #FFFFFF;

		.bang-club-top {
			background-color: #64B6A8;
			padding: 0 0 40rpx 0;
			color: #fff;

			.bang-top {
				width: 100%;
				display: flex;
				justify-content: flex-end;
				margin-right: 30rpx;

				.ming-xis {
					margin: 5rpx 30rpx 0 0;
					width: 140rpx;
					color: #fff;
					padding: 2rpx 10rpx;
					border: 2rpx solid #fff;
					border-radius: 24rpx;
					text-align: center;
				}
			}

			.top-item {
				flex: 1;

				.top-title {
					padding: 10rpx 0 10rpx 30rpx;
					font-size: 28rpx;
				}

				.top-content {
					box-sizing: content-box;
					height: 60rpx;
					background-color: #64B6A8;
					padding: 10rpx 40rpx 12rpx;
					align-items: center;
					justify-content: center;
					text-align: center;
					font-size: 44rpx;
					font-weight: 500;
				}

				.top-left {
					border-right: 4rpx solid #fff;
				}

			}
		}

		.task-content {
			align-items: flex-start;
			justify-content: space-between;
			padding: 30rpx 30rpx 0;
			border-radius: 40rpx 40rpx 0 0;

			.task-title {
				margin-bottom: 40rpx;

				.today-task {
					font-size: 34rpx;
					font-weight: 500;
					color: #333333;
					margin: 0 0 2rpx 0;
				}

				.today-task-desc {
					font-size: 24rpx;
					font-weight: 400;
					color: #A3AAB0;
				}
			}

			.level-rule {
				padding: 9rpx 17rpx;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 1rpx solid #64B6A8;
				color: #64B6A8;
			}


		}

		.task-list {
			padding: 0 50rpx;

			.task-li {
				align-items: center;
				padding: 30rpx 0 24rpx 0;
				box-sizing: border-box;
				border-bottom: 1rpx solid #D6D6D6;
				justify-content: space-between;

				.task-left {
					align-items: center;

					image {
						width: 66rpx;
						height: 66rpx;
						margin: 0 28rpx 0 0;
					}

					.task-desc {
						.task-title {
							width: 360rpx;
							// white-space: nowrap;
							// overflow: hidden;
							// text-overflow: ellipsis;
							font-size: 32rpx;
							color: #333333;
						}

						.task-dot {
							font-size: 26rpx;
							color: #A3AAB0;
						}
					}
				}

				.task-right {
					flex-direction: column;
					align-items: center;

					.task-btn {
						padding: 12rpx 36rpx;
						font-size: 26rpx;
						color: #FFFFFF;
						background: #64B6A8;
						border-radius: 30rpx 30rpx 30rpx 30rpx;
					}

					.finish {
						background: #fff;
						border: 1rpx solid #A3AAB0;
						color: #A3AAB0;
					}
				}
			}

		}


		.more-task {
			// position: absolute;
			// left: 50%;
			// transform: translate(-50%);
			// bottom: calc(30rpx + env(safe-area-inset-bottom));
			width: 100%;
			text-align: center;
			padding: 20rpx 0;
			// margin: 10rpx auto 0;
			// padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
			font-size: 26rpx;
			color: #8FBAB2;
		}

	}


	.fabuZbc {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.7);
		display: flex;
		justify-content: center;
		// flex-wrap: wrap;
		z-index: 999999999;

		.fabuZbc_sj {
			width: 100%;
			position: absolute;
			top: 40%;
			left: 0;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.fzView {
				width: 25%;
				text-align: center;
				margin-top: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
				}

				p {
					width: 100%;
					font-size: 35rpx;
					color: #fff;
					text-align: center;
					margin-top: 24rpx;
					white-space: nowrap;
				}
			}

			.show {
				position: absolute;
				width: 58rpx;
				height: 58rpx;
				left: 50%;
				transform: translateX(-50%);
				bottom: -100rpx;
			}
		}
	}

	.activityCenter {
		position: relative;

		.jiLu {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 32rpx;
			font-weight: 400;
			color: #64B6A8;
			margin-bottom: 10rpx;
			position: absolute;
			right: 20rpx;
			top: -70rpx;
		}

		.iteam {
			width: 750rpx;
			padding: 32rpx 30rpx;
			background-color: #fff;
			margin-bottom: 20rpx;

			.image {
				width: 690rpx;
				height: 290rpx;
				border-radius: 18rpx;
			}

			.iteam_title {
				display: flex;
				align-items: center;
				width: 690rpx;
				margin-top: 24rpx;
				margin-bottom: 16rpx;

				.label {
					width: 130rpx;
					height: 52rpx;
					background-color: #E66453;
					border-radius: 30rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.title {
					flex: 1;
					margin-left: 20rpx;
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}

			.iteam_time {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.left_time {
					font-size: 24rpx;
					font-weight: 400;
					color: #888888;

					.startTime {
						margin-bottom: 10rpx;
					}
				}

				.right_ckxq {
					font-size: 26rpx;
					font-weight: 400;
					color: #64B6A8;
				}
			}
		}

		.iteam:first-child {
			border-radius: 40rpx 40rpx 0 0;
		}

		.iteam:nth-last-child(2) {
			margin-bottom: 0;
		}

		.more {
			width: 100%;
			text-align: center;
			font-size: 26rpx;
			font-weight: 400;
			color: #8FBAB2;
			padding: 20rpx 0;
			background-color: #fff
		}
	}
</style>